<template>
	<div class="dashboard-view">
		<a-row :gutter="16">
			<a-col :lg="6" :md="24" :sm="24" :xl="6" :xs="24">
				<catalog />
			</a-col>
			<a-col :lg="18" :md="24" :sm="24" :xl="18" :xs="24">
				<div v-if="!currentCategoryId" class="flex justify-center h-full items-center">
					<a-empty description="请选择分类" />
				</div>
				<div v-else>
					<!-- 使用权限包装组件 -->
					<dashboard-permission-wrapper ref="permissionWrapperRef" />
				</div>
			</a-col>
		</a-row>
	</div>
</template>

<script name="dashboardView" setup>
	import { ref, watch } from 'vue'
	import { storeToRefs } from 'pinia'
	import { designStore } from '@/views/plugin/dashboard/store/design.js'
	import Catalog from '@/views/plugin/dashboard/view/main/component/catalog.vue'
	import DashboardPermissionWrapper from '@/views/plugin/dashboard/view/main/component/DashboardPermissionWrapper.vue'

	const store = designStore()
	const { currentCategoryId } = storeToRefs(store)

	const permissionWrapperRef = ref(null)

	// 监听分类变化，刷新权限包装组件
	watch(
		currentCategoryId,
		(newCategoryId) => {
			if (newCategoryId && permissionWrapperRef.value) {
				// 当分类变化时，重新加载可访问的仪表盘
				permissionWrapperRef.value.refresh()
			}
		},
		{ immediate: false }
	)
</script>

<style lang="less" scoped>
	.dashboard-view {
		height: 100%;
		padding: 16px;

		.ant-row {
			height: 100%;
		}

		.ant-col {
			height: 100%;
		}
	}
</style>
